<script setup lang="ts">
import { computed, ref, reactive, onMounted } from "vue";
import { statistics_performance } from "@/api/index";
import ReCol from "@/components/ReCol";
import Segmented, { type OptionsType } from "@/components/ReSegmented";

import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

let curWeek = ref(0);
const optionsBasis = reactive([
  {
    label: "本月",
    type: 1
  },
  {
    label: "上月",
    type: 2
  }
]);

const dataList = ref([]);
const userDataList = ref([])
const loading = ref(true);
const columns: TableColumnList = [
  {
    label: "名次",
    type: "index",
    width: 80
  },
  {
    label: "姓名",
    prop: "nickname"
  },
  {
    label: "成交额",
    prop: "deal_price"
  },
  {
    label: "成交单数",
    prop: "deal_num"
  }
];

onMounted(() => {
  onSearch()
});

function onSearch() {
  loading.value = true;
  statistics_performance({
    type: optionsBasis[curWeek.value].type
  }).then((res) => {
    if (props.element.scope == 'self') {
      let resData = res.data.list
      let userData = res.data.user
      let ranking = resData.sort((a, b) =>  Number(b.deal_price) - Number(a.deal_price));
      let indexItem = ranking.map((item, index) => ({
        index,
        item
      })).filter(item => userData.id == item.item.id)[0]
      userData.index = indexItem.index + 1
      userDataList.value = [userData]
      dataList.value = ranking.splice(0, 6)
      loading.value = false;
    } else {
      let resData = res.data
      dataList.value = resData.sort((a, b) =>  Number(b.deal_price) - Number(a.deal_price)).splice(0, 6);
      loading.value = false;
    }
  });
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="12"
    :xs="24"
    :sm="24"
    :md="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 400
      }
    }"
  >
    <el-card shadow="never">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <b class="text-md font-medium mr-[20px]">组内客户转化排名</b>
          <Segmented v-model="curWeek" :options="optionsBasis" @change="onSearch" />
        </div>
        <el-button round style="padding: 8px"
          >了解更多<el-icon class="el-icon--right"><ArrowRight /></el-icon
        ></el-button>
      </div>

      <pure-table
        class="mt-3"
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="{ background: 'transparent' }"
        :data="dataList"
        :columns="columns"
      >
        <template #empty>
          <el-empty description="暂无数据" :image-size="60"></el-empty>
        </template>
      </pure-table>

      <template v-if="props.element.scope == 'self'">
        <div class="bt">我的排名</div>
        <pure-table
          row-key="id"
          alignWhole="center"
          showOverflowTooltip
          :loading="loading"
          :loading-config="{ background: 'transparent' }"
          :data="userDataList"
          :columns="columns"
        >
          <template #empty>
            <el-empty description="暂无数据" :image-size="60"></el-empty>
          </template>
        </pure-table>
      </template>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
  .bt {
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
  }
</style>
